<template>
  <div>
    <el-card class="box-card" style="width: 96%; margin: 30px;">
      <p class="fsize18">课程信息确认</p>
      <div id="aCourseInfo">
        <div id="leftImage">
          <el-image style="width: 330px; height: 180px"
                    :src="src"></el-image>
        </div>
        <div id="rightInfo">
          <p style="font-size: 23px">{{ this.courseInfo.title }}</p>
          <p class="fsize16" style="color: #999">讲师：{{ this.courseInfo.name }}</p>
          <p class="fsize18" style="color: #ff0042;">￥{{ this.courseInfo.price }}</p>
          <p style="font-size: 15px">共1件商品</p>
        </div>
      </div>
      <div class="oBorderTop oBorderBom">
        <p class="fsize18">需支付金额</p>
        <p class="fsize16" style="margin-top: 20px">课程价格：￥{{ this.courseInfo.price }}</p>
        <p class="fsize16" style="margin-top: 20px">实际支付：￥{{ this.courseInfo.price }}</p>
      </div>
      <div style="float: right; padding: 30px 30px 60px 30px;">
        <el-checkbox v-model="checked" style="position: relative; left: 100px">同意谷粒学院服务协议</el-checkbox>
        <el-button class="bottomBtn" type="success" @click="payCourse" :disabled="!checked">去付款</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import course from "@/api/course";
import order from "@/api/order";
import cookie from "js-cookie";

export default {
  data() {
    return {
      checked: false,
      courseId: '',
      courseInfo: {},
      loginInfo: '',
      orderNum: '',
      src: ''
    }
  },
  created() {
    if (this.$route.params && this.$route.params.id) {
      this.courseId = this.$route.params.id
    }
    this.getCourseInfoById()
    this.showInfo()
    console.log(this.loginInfo)
  },
  methods: {
    // 获取课程信息
    getCourseInfoById() {
      course.getCourseInfoById(this.courseId)
        .then(res => {
          this.courseInfo = res.data.data.courseInfo
          this.src = this.courseInfo.cover
        })
    },
    // 支付课程，生成订单信息
    payCourse() {
      if (this.loginInfo === '') {
        this.$router.push({path: '/login/' + this.courseId})
      } else {
        console.log(this.loginInfo)
        order.getOrderNum(this.courseId, this.loginInfo)
          .then(res => {
            this.orderNum = res.data.data.orderNum
            this.$router.push({path: '/pay/' + this.orderNum})
          })
      }
    },
    loginAfterPay() {
      this.$router.push({path: '/login/' + this.courseId})
    },
    // 获取用户登录信息
    showInfo() {
      // 从cookie获取用户信息
      let userStr = cookie.get('guli_ucenter');
      // 把字符串转换为json对象
      if (userStr) {
        this.loginInfo = JSON.parse(userStr);
      }
    },
  }
}
</script>

<style scoped>
#aCourseInfo {
  margin-top: 10px;
}

#leftImage {
  display: inline-block;
}

#rightInfo {
  margin-left: 30px;
  display: inline-block;
  position: relative;
  bottom: 30px;
}

#rightInfo p {
  margin-bottom: 20px;
}

.oBorderTop {
  padding: 30px;
  border-top: #eee solid 1px;
}

.oBorderBom {
  padding: 30px;
  border-bottom: #eee solid 1px;
}

.fsize16 {
  font-size: 16px;
}

.fsize18 {
  font-size: 18px;
}

.bottomBtn {
  position: relative;
  top: 40px;
}


</style>
